//新品系列的接口地址：https://www.ysl.cn/rest/default/V1/catalog/productListByUrl?url=shop-women%2Fnew-collection.html&page=1

let middle_ul = document.querySelector(".middle_ul");
let center = document.querySelector(".center");
let center_right = document.querySelector(".center_right");
let even = document.querySelector(".even");
let car=document.querySelector(".car");
let c_height=center.offsetHeight;
let page = 1;
getData(page);


center.onclick = function (e) {
    if (e.target.classList.contains("find")) {
        center_right.style.right = 0;
        even.style.display = 'block';
    }

    if (e.target.classList.contains("cancle")) {
        center_right.style.right = "-511px";
        even.style.display = 'none';
    }

    if(e.target.classList.contains("btn_more")){
        page+=1;
        c_height+=3200;
        if(page==7){
            c_height-=2000;
            center.style.height=c_height+"px";
        }else if(page>7){
            return;
        }
        console.log(page);
        center.style.height=c_height+"px";
        getData(page);
    }

    if (e.target.classList.contains("shoppingcar")) {
        let user = getCookie("login");
        if (!user) {
            localStorage.setItem("url", location.href);
            confirm("请先登录!");
            if (confirm) {
                location.href = "../html/login.html";
                return;
            }
        }
        car.style.right = 0;
        even.style.display = 'block';
    }

    if (e.target.classList.contains("quxiao")) {
        car.style.right = "-511px";
        even.style.display = 'none';
    }
}




//接口请求
async function getData(index) {
    let data = await pAjax({
        url: "/rest/default/V1/catalog/productListByUrl",
        data: `url=shop-women%2Fnew-collection.html&page=${index}`
    });
    let {
        items
    } = JSON.parse(data).data;
    console.log(items);
    localStorage.setItem("Ms.datalist", JSON.stringify(items));
    renden(items);
}



//数据渲染
function renden(data) {
    middle_ul.innerHTML += data.map((item) => {
        return `<li><a href="./details.html?id=${item.id}">
            <p>
                <img src="${item.defaultImage}" alt="">
            </p>
            <span>${item.name}</span>
            <span>+ ${item.attributes[0].values.length} 种颜色</span>
            <p>
                <span>${item.price}</span>
                <span>${item.channelExclusiveTag}</span>
            </p>
        </a></li>`
    }).join("");

    let liAll = document.querySelectorAll(".middle_ul li");

}